var map;
  function initialize() {
    var mapDiv = document.getElementById('map');
    map = new google.maps.Map(mapDiv, {
      center: new google.maps.LatLng(48.208174,16.373819),
      zoom: 12,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    google.maps.event.addListenerOnce(map, 'tilesloaded', addMarkers);

  }
  function addMarkers() {

      {% for mark in zone %}
        var point = new google.maps.LatLng({{mark.position.latitude}},{{mark.position.longitude}});
            var image = '{{ STATIC_PREFIX }}'+ 'checkmark.png';
            var marker = new google.maps.Marker({
            position: point,
            map: map,
            icon: image,
            url: 'http://172.16.0.101:8882/zone/' + {{mark.id}},
           title: '{{ mark.id }}',
        });
             marker['infowindow']  = new google.maps.InfoWindow({
                     content: "<h1>{{mark.name}}</h1> <br> {{ mark.name }} <p> <a href=\"http:\/\/172.16.0.101:8882\/zone\/{{ mark.id }}\"> {{ mark.name }}</a>",
        });
            google.maps.event.addListener(marker, 'click', function() {
                //window.location.href = this.url;
                 this['infowindow'].open(map, this);
            });
           google.maps.event.addListener(marker, 'mouseover', function() {
                // this['infowindow'].open(map, this);
                    });
           google.maps.event.addListener(marker, 'mouseout', function() {
                // this['infowindow'].close(map, this);

            });





        {% endfor %}

  }


  google.maps.event.addDomListener(window, 'load', initialize);
